<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui"
	xmlns:c="http://java.sun.com/jsp/jstl/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:fn="http://java.sun.com/jsp/jstl/functions"> 
    <h:head>
        <title>Teste - Lenovo</title>
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> 
    </h:head>
    
    <h:body style="background-color: #f3f3f3">
    
    <h:form>
      <p:dataTable id="table" value="#{usuarioMb.lista}" var="q"
                         emptyMessage="No Registry" editable="true" paginator="true"
                         rows="10" 
                         paginatorTemplate=" {CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
                         rowsPerPageTemplate="10,50,200,500" rowKey="#{q.id}"
                         style="table-layout:fixed;font-size:x-small;"
                         editMode="row"
                         filterDelay="1500"
                         lazy="true">
                <f:facet name="header">
                    <p:outputPanel>

                    </p:outputPanel>
                </f:facet>

                <p:column headerText="Name" filterBy="#{q.nome}" filterMatchMode="contains"
                          filterStyle="width: 80%;"
                          style="width:50%;">
                    <p:cellEditor>
                        <f:facet name="output">
                            <h:outputText value="#{q.nome}" />
                        </f:facet>
                        <f:facet name="input">
                            <p:inputText value="#{q.nome}" style="width: 50%; margin-left: 5px;text-transform: uppercase;" />
                        </f:facet>
                    </p:cellEditor>
                </p:column>

                <p:column headerText="Email" filterBy="#{q.email}" filterMatchMode="contains" style="width:20%;"
                          filterStyle="width: 80px;">
                    <p:cellEditor>
                        <f:facet name="output">
                            <h:outputText value="#{q.email}" />
                        </f:facet> 
                        <f:facet name="input">
                            <p:inputText value="#{q.email}" style="width: 80%; margin-left: 5px;text-transform: lowercase;" />
                        </f:facet>
                    </p:cellEditor>
                </p:column>

                <p:column headerText="Function" filterBy="#{q.funcao}" filterMatchMode="contains" style="width:25%;">
                    <p:cellEditor>
                        <f:facet name="output">
                            <h:outputText value="#{q.funcao}" />
                        </f:facet>
                        <f:facet name="input">
                            <h:inputText value="#{q.funcao}" style="width: 50%; margin-left: 5px;text-transform: uppercase;" />
                        </f:facet>
                    </p:cellEditor>
                </p:column>

                <p:column headerText="Department" filterBy="#{q.departamento}" filterMatchMode="contains" style="width:10%;">
                    <p:cellEditor>
                        <f:facet name="output">
                            <center>
                                <h:outputText value="#{q.departamento}" />
                            </center>                                
                        </f:facet>
                        <f:facet name="input">
                            <p:inputText value="#{q.departamento}" style="width: 40%; margin-left: 5px;text-transform: uppercase;" />
                        </f:facet>
                    </p:cellEditor>
                </p:column>

            </p:dataTable>
    </h:form>
        
    </h:body>
    
</html>